<template>
    <view class="container">
        <!-- 页面头部 -->
        <view class="page-header">
            <view class="header-title">婚恋列表</view>
            <view class="header-subtitle">找到你的另一半</view>
        </view>

        <!-- 用户列表 -->
        <scroll-view class="list-container" scroll-y @scrolltolower="loadMore" :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
            <view class="user-card" v-for="(user, index) in userList" :key="index" @click="select(user.userId)">
                <!-- 用户头像 -->
                <view class="user-avatar-wrapper">
                    <image 
                        :src="getUserAvatar(user)" 
                        class="user-avatar"
                        mode="aspectFill"
                    ></image>
                    <view v-if="user.vip" class="vip-badge">VIP</view>
                    <view v-if="user.isOnline" class="online-indicator"></view>
                </view>

                <!-- 用户信息 -->
                <view class="user-info">
                    <view class="user-name-wrapper">
                        <text class="user-name">{{ user.name }}</text>
                        <view class="gender-badge" :class="{ male: user.sex === 1, female: user.sex === 2 }">
                            {{ user.sex === 1 ? '♂' : '♀' }}
                        </view>
                    </view>

                    <view class="user-details">
                        <view v-if="user.career" class="detail-item">
                            <text class="detail-label">职业</text>
                            <text class="detail-value">{{ user.career }}</text>
                        </view>
                        <view v-if="user.degree" class="detail-item">
                            <text class="detail-label">学历</text>
                            <text class="detail-value">{{ user.degree }}</text>
                        </view>
                    </view>

                    <view class="user-stats">
                        <view class="stat-item">
                            <text class="stat-label">评分</text>
                            <text class="stat-value">{{ user.rate || 0 }}分</text>
                        </view>
                        <view class="stat-item">
                            <text class="stat-label">浏览</text>
                            <text class="stat-value">{{ user.pv || 0 }}</text>
                        </view>
                        <view class="stat-item">
                            <text class="stat-label">推荐</text>
                            <text class="stat-value">{{ user.recommendCount || 0 }}</text>
                        </view>
                    </view>

                    <view v-if="user.birth" class="user-birth">
                        <text class="birth-text">{{ formatBirth(user.birth) }}</text>
                    </view>
                </view>

                <!-- Hi 按钮 -->
                <view class="hi-btn" v-if="user.userId != myuserid && chat" @click.stop="sendHi(user)">
                    <text>Hi</text>
                </view>
            </view>

            <!-- 加载更多 -->
            <view v-if="show" class="loading-more">
                <tui-loading :text="text" :size="30" unit="rpx"></tui-loading>
            </view>

            <!-- 没有更多数据 -->
            <view v-if="userList.length >= total && userList.length > 0" class="no-more">
                <text>没有更多数据了</text>
            </view>

            <!-- 空状态 -->
            <view v-if="userList.length === 0 && !show" class="empty-state">
                <image src="/static/img/tabs/my.png" class="empty-image" mode="aspectFit"></image>
                <text class="empty-title">暂无用户数据</text>
                <text class="empty-desc">请稍后再试</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    import cfg from '@/common/config.js'
    export default {
        data() {
            return {
                chat: false,
                myuserid: '',
                enable: false,
                // 数据列表
                userList: [],
                // 分页
                pages: {
                    // 页码
                    pageNo: 1,
                    // 条数
                    pageSize: 10,
                },
                // 总条数
                total: 0,
                // 加载文字
                text: '加载中',
                show: false,
                // 下拉刷新
                refreshing: false
            };
        },
        mounted() {
            var t = this
            t.chat = t.f.storage('switchCfg').module.dating.chat
            if (t.f.isnull(t.f.storage('user_data')) != '') {
                t.myuserid = t.f.storage('user_data').userId
            }
        },
        methods: {
            // 获取用户头像
            getUserAvatar(user) {
                if (user.cover && Array.isArray(user.cover) && user.cover.length > 0) {
                    return user.cover[0];
                }
                return '/static/img/tabs/my.png';
            },

            // 格式化出生日期
            formatBirth(birth) {
                if (!birth) return '';
                // 如果已经是格式化的日期字符串，直接返回
                if (typeof birth === 'string' && birth.includes('-')) {
                    return birth;
                }
                // 如果是时间戳，格式化
                if (typeof birth === 'number') {
                    const date = new Date(birth);
                    return date.getFullYear() + '-' + 
                           String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                           String(date.getDate()).padStart(2, '0');
                }
                return birth;
            },

            // 获取会员列表
            gitMemberList() {
                var t = this
                if (!t.enable) return
                t.$api.req('/dating/member/page',{
                    pageNo: t.pages.pageNo,
                    pageSize: t.pages.pageSize
                },'get','JSON',false).then(res => {
                    if (res.code === 0) {
                        t.userList = res.data.list || []
                        t.total = res.data.total || 0
                        // 处理用户数据，添加在线状态等
                        t.userList.forEach(item => {
                            item.isOnline = Math.random() > 0.5; // 模拟在线状态
                        })
                    } else {
                        uni.showToast({
                            title: res.msg || '加载失败',
                            icon: 'none'
                        });
                    }
                }).catch(err => {
                    console.error('加载用户列表失败:', err);
                    uni.showToast({
                        title: '网络错误',
                        icon: 'none'
                    });
                })
            },

            // 下拉刷新
            onRefresh() {
                this.refreshing = true;
                this.pages.pageNo = 1;
                this.userList = [];
                this.gitMemberList();
                setTimeout(() => {
                    this.refreshing = false;
                }, 1000);
            },

            // 列表触底事件
            loadMore() {
                if (this.userList.length < this.total && !this.show) {
                    this.show = true
                    this.pages.pageNo = this.pages.pageNo + 1
                    var t = this
                    if (!t.enable) return
                    t.$api.req('/dating/member/page',{
                        pageNo: t.pages.pageNo,
                        pageSize: t.pages.pageSize
                    },'get','JSON',false).then(res => {
                        if (res.code === 0) {
                            const newList = res.data.list || []
                            t.userList = t.userList.concat(newList)
                            t.total = res.data.total || 0
                            // 处理新用户数据
                            newList.forEach(item => {
                                item.isOnline = Math.random() > 0.5;
                            })
                        }
                        t.show = false
                    }).catch(err => {
                        console.error('加载更多失败:', err);
                        t.show = false
                    })
                }
            },

            // 跳转到用户详细信息页面
            select(id) {
                this.f.nav(`/subPackage1/marriageDetail/marriageDetail?id=${id}`)
            },

            sendHi(user) {
                this.f.nav(`/subPackage1/chat/chat?userId=${user.userId}&name=${user.name}`)
            },
        },
        onLoad() {
            var t = this
            uni.request({
                url: cfg.adminurl + '/infra/config/get-value-by-key?key=uniapp.config',
                method: 'GET',
                header: {
                    'tenant-id': '1'  // 设置请求头
                },
                success: (res) => {
                    console.log(res);

                    var switchCfg = JSON.parse(res.data.data)
                    this.f.storage('switchCfg',switchCfg)
                    this.enable = this.f.storage('switchCfg').module.enable
                    setTimeout(() => {
                        this.gitMemberList()
                    },100);
                    console.log('请求成功',res.data.data);
                },
                fail: (err) => {
                    console.log('请求失败',err);
                }
            });
        }
    };
</script>

<style lang="scss" scoped>
    /* 页面容器样式 */
    .container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        background: #f8f9fa;
    }

    /* 页面头部 */
    .page-header {
        background: linear-gradient(135deg, #a55fee, #c77dff);
        padding: 40rpx 30rpx 30rpx;
        color: white;
    }

    .header-title {
        font-size: 36rpx;
        font-weight: 600;
        margin-bottom: 8rpx;
    }

    .header-subtitle {
        font-size: 26rpx;
        opacity: 0.9;
    }

    /* 列表容器 */
    .list-container {
        flex: 1;
        padding: 20rpx;
    }

    /* 用户卡片样式 */
    .user-card {
        position: relative;
        background: white;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
        padding: 30rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
    }

    .user-card:active {
        transform: scale(0.98);
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
    }

    /* 用户头像 */
    .user-avatar-wrapper {
        position: relative;
        margin-right: 24rpx;
    }

    .user-avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        border: 3rpx solid #f0f0f0;
    }

    .vip-badge {
        position: absolute;
        top: -5rpx;
        right: -5rpx;
        background: linear-gradient(135deg, #ffd700, #ffed4e);
        color: #8b4513;
        font-size: 18rpx;
        font-weight: 600;
        padding: 2rpx 8rpx;
        border-radius: 8rpx;
        text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
    }

    .online-indicator {
        position: absolute;
        bottom: 5rpx;
        right: 5rpx;
        width: 20rpx;
        height: 20rpx;
        background: #4CAF50;
        border-radius: 50%;
        border: 3rpx solid white;
    }

    /* 用户信息 */
    .user-info {
        flex: 1;
        min-width: 0;
    }

    .user-name-wrapper {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
    }

    .user-name {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-right: 12rpx;
    }

    .gender-badge {
        font-size: 24rpx;
        padding: 4rpx 8rpx;
        border-radius: 12rpx;
        font-weight: 600;
    }

    .gender-badge.male {
        background: #e3f2fd;
        color: #1976d2;
    }

    .gender-badge.female {
        background: #fce4ec;
        color: #c2185b;
    }

    .user-details {
        display: flex;
        flex-wrap: wrap;
        gap: 16rpx;
        margin-bottom: 12rpx;
    }

    .detail-item {
        display: flex;
        align-items: center;
        background: #f5f5f5;
        padding: 4rpx 12rpx;
        border-radius: 12rpx;
    }

    .detail-label {
        font-size: 22rpx;
        color: #666;
        margin-right: 8rpx;
    }

    .detail-value {
        font-size: 22rpx;
        color: #333;
        font-weight: 500;
    }

    .user-stats {
        display: flex;
        gap: 20rpx;
        margin-bottom: 12rpx;
    }

    .stat-item {
        display: flex;
        align-items: center;
    }

    .stat-label {
        font-size: 22rpx;
        color: #999;
        margin-right: 4rpx;
    }

    .stat-value {
        font-size: 22rpx;
        color: #666;
        font-weight: 500;
    }

    .user-birth {
        margin-top: 8rpx;
    }

    .birth-text {
        font-size: 24rpx;
        color: #666;
        background: #f0f0f0;
        padding: 4rpx 12rpx;
        border-radius: 12rpx;
    }

    /* Hi 按钮 */
    .hi-btn {
        width: 80rpx;
        height: 80rpx;
        background: linear-gradient(135deg, #a55fee, #c77dff);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        color: white;
        font-weight: 600;
        box-shadow: 0 4rpx 12rpx rgba(165, 95, 238, 0.3);
        transition: all 0.3s ease;
    }

    .hi-btn:active {
        transform: scale(0.95);
    }

    /* 加载更多 */
    .loading-more {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40rpx 0;
    }

    .no-more {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40rpx 0;
        color: #999;
        font-size: 26rpx;
    }

    /* 空状态 */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 120rpx 60rpx;
        text-align: center;
    }

    .empty-image {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 40rpx;
        opacity: 0.6;
    }

    .empty-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 16rpx;
    }

    .empty-desc {
        font-size: 26rpx;
        color: #666;
        line-height: 1.5;
    }

    /* 响应式适配 */
    @media screen and (max-width: 750rpx) {
        .user-avatar {
            width: 100rpx;
            height: 100rpx;
        }
        
        .user-name {
            font-size: 30rpx;
        }
        
        .user-details {
            gap: 12rpx;
        }
        
        .detail-item {
            padding: 3rpx 10rpx;
        }
    }
</style>